import React from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

import attributes from "@/assets/images/attributes.png";
import background from "@/assets/images/background.jpeg";

function Glider() {
  return (
    <div>
      <Carousel>
        <CarouselContent>
          <CarouselItem>
            <div className="h-[600px] flex flex-col justify-around items-center">
              <h1 className="text-6xl font-bold text-white">
                医路前行，只问耕耘
              </h1>
              <p className="text-4xl text-white p-4 ">
                医学专科领域深耕医疗信息化十余年，以问题为导向，选择最佳方案为您服务。
              </p>
              <button className="px-4 py-2 text-white bg-red-700  border border-transparent rounded-md hover:gb-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-150 ease-in-out">
                探索更多
              </button>
            </div>
          </CarouselItem>
          <CarouselItem>
            {/* 此slide方案介绍内容靠左对齐 */}
            <div className="slide-caption left">
              <h1>专业指标，严谨可溯</h1>
              <p className="pl-40">
                涉足专科领域，必严谨深入，确保数据专业合理，每一个指标项我们都认真对待
              </p>
              <button className="explore-btn">探索更多</button>
            </div>
            {/* 用作背景色，突显页面文字 */}
            <div className="backdrop"></div>
            <img src={attributes} alt="attributes" />
          </CarouselItem>
          <CarouselItem>...</CarouselItem>
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
}

export default Glider;
